<template>
  <div style="border-color: #f2f2f6;">
    <el-button plain @click="RoomCodeAdd()">新增商品</el-button>

    <el-input v-model="form.GoodsName" style="max-width: 300px" placeholder="商品名称" class="input-with-select">
      <template #append>
        <el-button @click="RoomTypegetlist()" :icon="Search" />
      </template>
    </el-input>
    
  </div>

  <el-table :data="tableData" style="width: 100%; margin-top: 30px;">
    <el-table-column prop="goodsName" label="商品名称" width="150" />
    <el-table-column prop="goodsPrice" label="商品价格（元）" width="150" />
    <el-table-column prop="coodNum" label="商品数量" width="150" />
    <el-table-column prop="goodsTypeId" label="商品类型" width="150">
      <template #default="{ row }">
        <span>{{ row.goodsTypeId == 1 ? '零食' : row.goodsTypeId == 2 ? '饮料' : row.goodsTypeId == 3 ? '计生用品' : '自定义'
        }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="goodsState" label="商品状态" width="150">
      <template #default="{ row }">
        <span>{{ row.goodsState == 1 ? '已售空' : '未售空'
        }}</span>
      </template>
    </el-table-column>


    <el-table-column label="操作" width="250">
      <template #default="{ row }">
        <el-button type="info" @click="RoomCodeUpdate(row)">编辑</el-button>
        <el-button type="danger" @click="RoomCodeDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!-- 添加 -->
  <div>
    <el-dialog v-model="roomCodeDialog" center top="5vh" width="35%" height="100%" draggable>
      <span>
        <h3>添加商品</h3>
      </span>
      <template #footer>
        <div class="dialog-footer" style="background-color:#f2f2f6;">
          <el-form-item label="商品名称" style="width: 350px;">
            <el-input v-model="RoomTypes.GoodsName" placeholder="商品名称" maxlength="10" />
          </el-form-item>
          <el-form-item label="商品价格" style="width: 350px;">
            <el-input v-model="RoomTypes.GoodsPrice" placeholder="商品价格" />
          </el-form-item>
          <el-form-item label="商品数量" style="width: 350px;">
            <el-input v-model="RoomTypes.CoodNum" placeholder="商品数量" />
          </el-form-item>
          <el-form-item label="商品类型" style="width: 550px;">
            <el-radio-group v-model="RoomTypes.GoodsTypeId">
              <el-radio value="1">零食</el-radio>
              <el-radio value="2">饮料</el-radio>
              <el-radio value="3">计生用品</el-radio>
              <el-radio value="4">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload class="avatar-uploader" action="http://120.26.135.179:8033/api/Goods/UploadImage"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="RoomTypes.GoodsImage" :src="RoomTypes.GoodsImage" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品状态">
            <el-radio-group v-model="RoomTypes1.GoodsState">
              <el-radio :value="false">未售空</el-radio>
              <el-radio :value="true">已售空</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type="primary" @click="RoomCodeInsert()">添加</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <div>
    <el-dialog v-model="roomCodeUpdateDialog" center top="5vh" width="35%" height="100%" draggable>
      <span>
        <h3>修改商品</h3>
      </span>
      <template #footer>
        <div class="dialog-footer" style="background-color:#f2f2f6;">
          <el-form-item label="商品名称" style="width: 350px;">
            <el-input v-model="RoomTypes1.GoodsName" placeholder="商品名称" maxlength="10" />
          </el-form-item>
          <el-form-item label="商品价格" style="width: 350px;">
            <el-input v-model="RoomTypes1.GoodsPrice" placeholder="商品价格" />
          </el-form-item>
          <el-form-item label="商品数量" style="width: 350px;">
            <el-input v-model="RoomTypes1.CoodNum" placeholder="商品数量" />
          </el-form-item>
          <el-form-item label="商品类型" style="width: 550px;">
            <el-radio-group v-model="RoomTypes1.GoodsTypeId">
              <el-radio value="1">零食</el-radio>
              <el-radio value="2">饮料</el-radio>
              <el-radio value="3">计生用品</el-radio>
              <el-radio value="4">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload class="avatar-uploader" action="http://120.26.135.179:8033/api/Goods/UploadImage"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="RoomTypes1.GoodsImage" :src="RoomTypes.GoodsImage" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品状态">
            <el-radio-group v-model="RoomTypes1.GoodsState">
              <el-radio :value="false">未售空</el-radio>
              <el-radio :value="true">已售空</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type="primary" @click="RoomCodeUpd()">修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus';

import { Search } from '@element-plus/icons-vue'
import type { UploadInstance } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import router from '@/router';

const form = reactive({
  GoodsName: '',
});
//钩子函数
onMounted(() => {
  RoomTypegetlist();
})
//显示商品信息
const tableData = ref([])

const RoomTypegetlist = () => {
  axios.get('http://120.26.135.179:8033/api/GoodsInfo', {
    params: {
      GoodsName: form.GoodsName
    }
  })
    .then(res => {
      tableData.value = res.data.data;
    })
}

// const AddRoomTypeDialog = ref(false);
//新增商品
// const RoomTypes = reactive({
//   GoodsName: '',
//   GoodsImage: '',
//   GoodsTypeId: null,
//   GoodsPrice: null,
//   peopleNumber: null,
//   CoodNum: null,
//   goodsState: null,
// })
// const AddRoomTypes = () => {
//   AddRoomTypeDialog.value = true;
// }
// const roomtypesUpdate = () => {
//   axios.post('https://localhost:44392/api/Goods', RoomTypes).then(res => {
//     if (res.data.code == 0) {
//       ElMessage.success(res.data.message);

//     }
//     else {
//       ElMessage.error(res.data.message);
//     }
//   })
// }



const roomCodeDialog = ref(false);
//新增房号
const RoomTypes = reactive({
  GoodsName: '',
  GoodsImage: '',
  GoodsTypeId: null,
  GoodsPrice: null,
  CoodNum: null,
  GoodsState: false,
})
const RoomCodeAdd = () => {
  roomCodeDialog.value = true;
  // RoomTypes.value = row;
}

const RoomCodeInsert = () => {
  axios.post('http://120.26.135.179:8033/api/Goods', RoomTypes)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success(res.data.message)
        roomCodeDialog.value = false;
        RoomTypegetlist();
      }
      else {
        ElMessage.error(res.data.message)
      }
    })
}


const roomCodeUpdateDialog = ref(false);
//修改商品
const RoomTypes1 = reactive({

  id: null,
  GoodsName: '',
  GoodsImage: '',
  GoodsTypeId: null,
  GoodsPrice: null,
  CoodNum: null,
  GoodsState: true,

})
const RoomCodeUpdate = () => {
  roomCodeUpdateDialog.value = true;
  // RoomTypes1.value = row;
}
const RoomCodeUpd = () => {
  axios.post('http://120.26.135.179:8033/api/GoodsUpdate', RoomTypes1).then(res => {
    if (res.data.code == 0) {
      ElMessage.success(res.data.message);

    }
    else {
      ElMessage.error(res.data.message);
    }
  })
}
// const value1 = ref(true);

//上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes.GoodsImage = 'http://120.26.135.179:8033/' + response.data;
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片只能是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

///删除商品
const RoomCodeDelete = (row: any) => {
  ElMessageBox.confirm('确认要删除吗?', '错误', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios.delete('http://120.26.135.179:8033/api/GoodsInfoSingleDelete?Id=' + row.id)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage.success(res.data.message)
            RoomTypegetlist();
          }
          else {
            ElMessage.error(res.data.message)
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}





</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped>
img {
  margin: 10px;
}
</style>